<template>
    <div class="login-info">
        <img class="vip-icon" src="../assets/img/icon/vip.png" />
        <span class="vip-text">全站VIP特权</span>
        <template v-if="!loginFlag">
            <button class="login-btn" @click="changeLoginFlag">登录</button>
        </template>
        <template v-else>
            <div class="avatar-box">
                <img
                    class="avatar"
                    @mouseover="showUserInfo"
                    @mouseout="hideUserInfo"
                    @click="changeLoginFlag"
                    src="../assets/img/source/avatar.jpg"
                />
                <div
                    class="userinfo-box"
                    v-show="userInfoFlag"
                    @mouseover="showUserInfo"
                    @mouseout="hideUserInfo"
                >
                    <div class="userinfo">
                        <img class="user-avatar" src="../assets/img/source/avatar.jpg" />
                        <span class="user-name">爱设计的猪猪</span>
                    </div>
                    <div class="user-item" v-for="(item,index) of list" :key="index">
                        <button
                            class="item-btn"
                            :class="{'active':item.activeFlag}"
                            @mouseover="active(index)"
                            @mouseout="unactive(index)"
                            @click="jumpTo(item.path)"
                        >{{item.name}}</button>
                    </div>
                    <div class="user-item">
                        <img class="vip-notice" src="../assets/img/icon/vip-notice.png" />
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    data(){
        return {
            loginFlag: false,
            list: [
                {
                    name: "开通全站VIP",
                    activeFlag: true,
                    path:''
                },
                {
                    name: "个人中心",
                    activeFlag: false,
                    path:'/mine/h'
                },
                {
                    name: "我的下载",
                    activeFlag: false,
                    path:''
                },
                {
                    name: "我要充值",
                    activeFlag: false,
                    path:''
                },
                {
                    name: "发布素材",
                    activeFlag: false,
                    path:''
                },
                {
                    name: "退出登录",
                    activeFlag: false,
                    path:''
                }
            ],
            userInfoFlag: true,
            Timer: null,
        }
    },
    methods: {
        showUserInfo() {
            if (this.Timer) {
                clearTimeout(this.Timer);
                this.Timer = null;
            }
            this.userInfoFlag = true;
        },
        hideUserInfo() {
            let Timer = setTimeout(() => {
                this.userInfoFlag = false;
                if (this.Timer) {
                    clearTimeout(this.Timer);
                    this.Timer = null;
                }
            }, 1500);
            this.Timer = Timer;
        },
        active(index) {
            this.list[index].activeFlag = true;
        },
        unactive(index) {
            this.list[index].activeFlag = false;
        },
        changeLoginFlag() {
            this.loginFlag = !this.loginFlag;
        },
        jumpTo(path){
            path && this.$router.push(path).catch(err=>{
                // console.log(err)
            })
        }
    }
};
</script>

<style lang="less" scoped>
.login-info {
    .vip-icon {
        width: 24px;
        height: 18px;
        vertical-align: middle;
    }
    .vip-text {
        display: inline-block;
        vertical-align: middle;
        color: @main-color;
        font-size: @main-font-size;
    }
    .login-btn {
        font-size: 14px;
        color: @main-color;
        border: 1px solid @main-color;
        background: #fff;
        width: 70px;
        height: 28px;
        border-radius: 14px;
        vertical-align: middle;
        margin-left: 18px;
        cursor: pointer;
    }
    .avatar-box {
        display: inline-block;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        vertical-align: middle;
        line-height: normal;
        margin-left: 52px;
        position: relative;
        .avatar {
            width: 100%;
            height: 100%;
        }
        .userinfo-box {
            position: absolute;
            top: 48px;
            right: 0px;
            width: 180px;
            // height:280px;
            background: #fff;
            padding: 12px;
            z-index: 5;
            border-radius: 6px;
            font-size: @main-font-size;
            .userinfo {
                width: 100%;
                margin-bottom: 20px;
                .user-avatar {
                    width: 36px;
                    height: 36px;
                    vertical-align: middle;
                }
                .user-name {
                    display: inline-block;
                    vertical-align: middle;
                    color: #a6a6a6;
                }
            }
            .user-item {
                width: 100%;
                margin-bottom: 12px;
                text-align:center;
                .item-btn {
                    color: #a6a6a6;
                    outline: none;
                    border: none;
                    background: #ffffff;
                    border-radius: 32px;
                    padding: 6px 28px;
                    cursor: pointer;
                }
                .item-btn.active {
                    background: @main-color;
                    color: #ffffff;
                }
                .vip-notice {
                    width: 100%;
                }
            }
            .user-item:last-child {
                margin-bottom: 0;
            }
        }
    }
}
</style>